<template>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item,i) in breadList"
                          :key="i"
                          :index="item.name">
        <el-dropdown :hide-on-click="false"
                     @command="handleCommand"
                     >
          <span @click="paperReload" style="font-weight: bolder;cursor: pointer" v-if="i===0">{{item.name}}</span>
          <span class="el-dropdown-link" v-else>
            {{ item.name }}
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(child,j) in item.children"
                              :key="j"
                              :index="child.name"
                              :command="child"
                              >
            {{child.name}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-breadcrumb-item>
    </el-breadcrumb>

</template>

<script>
export default {
  inject:['reload'],
  name: "Breadcrumb",
  data() {
    return {
      breadList:[
        {directionId:0,parentId:-1,name:'论文库',leaf:false,index:0,children:[]}
      ],
      currentId:0,
      activeIndex:0
    }
  },
  methods:{
    /*
      处理面包导航下拉表单
     */
    handleCommand(command) {
      //把list回溯到command的父节点处
      let parentId=command.parentId
      let newList=[]
      for(let i=0;i<this.breadList.length;i++)
      {
        newList.push(this.breadList[i])
        if(this.breadList[i].directionId===parentId){
          this.activeIndex=i
          break
        }
      }
      this.breadList=newList
      //选中的选项index为父节点index+1
      command.index=this.activeIndex+1
      //获取子节点
      if(!command.leaf) this.getChildren(command.directionId)
      this.breadList.push(command)
      this.currentId=command.directionId
      this.activeIndex++
      this.$forceUpdate()
      //向父组件传commandId的值
      this.$emit('selectChange',command.directionId)
    },
    /*
    获得子节点
     */
    getChildren(id){
      this.$axios.get(`/direction/getChildren/${id}`).then(res=>{
       this.breadList[this.activeIndex].children=res.data.data
        console.log(this.breadList)
      }).catch(failRes=>{
        console.log(failRes)
      })
    },
    /*
      刷新界面
     */
    paperReload(){
      this.reload()
    }
  },
  mounted(){
    this.getChildren(this.currentId)
  }
}
</script>

<style scoped>
div, span {
  caret-color: transparent;
}

</style>
